<template>
  <el-select
    v-bind="$attrs"
    v-on="$listeners"
    :value="value"
    :class="css"
    :placeholder="placeholder"
    @change="handleChange"
  >
    <el-option
      v-for="item in staffData"
      :key="item.userId"
      :label="item.realName"
      :value="item.userId"
    ></el-option>
  </el-select>
</template>
<script>
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },

    job: {
      type: [String, Array],
      default: '',
    },
  },
  data() {
    return {}
  },
  computed: {
    staff() {
      return this.$store.getters.staff
    },

    staffData() {
      return !this.job ? this.staff : this.staff.filter(item => this.job.indexOf(item.job) > -1)
    },

    filterable() {
      return this.$attrs && this.$attrs.filterable !== false
    },

    placeholder() {
      return (this.$attrs && this.$attrs.placeholder) || '请选择人员'
    },

    css() {
      return (this.$attrs && this.$attrs.class) || 'w-100'
    },
  },

  watch: {},

  created() {
    this.$store.dispatch('getStaff')
  },

  methods: {
    handleChange(val) {
      const index = this.staffData.findIndex(it => it.userId === val)
      this.$emit('select', val, index > -1 ? this.staffData[index] : {})
    },
  },
}
</script>
<style lang="scss" scoped></style>
